<template>
  <div class="detailtabel">
    <div class="table_main">
		<el-row>
			<el-col :span="24">
				<el-row class="item_left">
					<el-col :span="24">
						<h3>订单信息:</h3>
              <el-row class="order_item">
                <el-col :sm="12"  :lg="8">
                  <div class="label">订单号:</div>
                  <div class="content">{{tableData.orderNum}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">订单备注:</div>
                  <div class="content">{{tableData.descrition?tableData.descrition:'未填写'}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">订单状态:</div>
                  <div class="content">{{tableData.status | statusFormat}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">创建时间:</div>
                  <div class="content">{{tableData.createAt}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">支付方式:</div>
                  <div class="content">{{tableData.payWay ? tableData.payWay == 1? '微信': '支付宝' : '未设置'}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">付款时间:</div>
                  <div class="content">{{tableData.payTime?tableData.payTime : '未付款'}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">完成状态:</div>
                  <div class="content">{{tableData.finishState | finishStateFormat}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">完成时间:</div>
                  <div class="content">{{tableData.finishTime?tableData.finishTime : '未完成'}}</div>
                </el-col>
              </el-row>

					</el-col>
				</el-row>
				<el-row class="item_left">
					<el-col :span="24">
						<h3>购买信息:</h3>
              <el-row class="order_item">
                <el-col :sm="12"  :lg="8">
                  <div class="label" style="height: 100px;">头像:</div>
                  <div class="content" style="height: 100px;"><img style="width: 65px; height: 65px" :src="tableData.headImg"></div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">陪玩id:</div>
                  <div class="content">{{tableData.playerId}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">陪玩昵称:</div>
                  <div class="content">{{tableData.playerName}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">游戏类型:</div>
                  <div class="content">{{tableData.gameType ? tableData.gameType == 1? '王者': '吃鸡' : '未设置'}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">商品个数:</div>
                  <div class="content">{{tableData.number}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">单价:</div>
                  <div class="content">{{tableData.price}}/每局</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">支付金额:</div>
                  <div class="content">{{tableData.payMoney}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">支付单号:</div>
                  <div class="content">{{tableData.payNum}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">优惠券ID:</div>
                  <div class="content">{{tableData.userCouponsId}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">优惠券金额:</div>
                  <div class="content">{{tableData.couponMoney}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">约定时间:</div>
                  <div class="content">{{tableData.conventionTime}}</div>
                </el-col>
              </el-row>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="24" style="float: right;">

				<el-row class="item_right">
					<el-col :span="24">
						<h3>退款信息:</h3>
						<el-row class="order_item">
              <el-col :sm="12"  :lg="8">
                <div class="label">是否可以退款:</div>
                <div class="content">{{tableData.isRefund ? tableData.isRefund == 1? '自动取消': '手动取消' : ''}}</div>
              </el-col>
              <el-col :sm="12"  :lg="8">
                <div class="label">退款方式:</div>
                <div class="content">{{tableData.type ? tableData.type == 1? '原路退回': '退回到钱包' : ''}}</div>
              </el-col>
              <el-col :sm="12"  :lg="8">
                <div class="label">退款金额:</div>
                <div class="content">{{tableData.refundMoney}}</div>
              </el-col>
              <el-col :sm="12"  :lg="8">
                <div class="label">退款理由:</div>
                <div class="content">{{tableData.refund}}</div>
              </el-col>
              <el-col :sm="12"  :lg="8">
                <div class="label">拒绝退款理由:</div>
                <div class="content">{{tableData.refusedRefund}}</div>
              </el-col>
            </el-row>
          </el-col>
				</el-row>
			</el-col>
		</el-row>
      <div class="footer" v-if="tableData.status == 4">
        <el-button :disabled="!isAuth('playWithOrder:approved')" type="primary" size="big" icon="el-icon-check" @click="queueClick()" >退款确认</el-button>
        <el-button :disabled="!isAuth('playWithOrder:refused')" type="primary" size="big" icon="el-icon-close" @click="queueRefuse()" >拒绝退款</el-button>
      </div>
	</div>
	</div>
</template>

<script>
  const status = [ // 1待付款 2已付款 3已取消 4待退款 5已退款 6拒绝退款
    {
      label: '待付款',
      value: 1
    },
    {
      label: '已付款',
      value: 2
    },
    {
      label: '已取消',
      value: 3
    },
    {
      label: '待退款',
      value: 4
    },
    {
      label: '已退款',
      value: 5
    },
    {
      label: '拒绝退款',
      value: 6
    },
  ]
  const finishState = [ //1待完成 2进行中 3已完成 4已评价 5未接单 6订单取消
    {
      label: '待完成',
      value: 1
    },
    {
      label: '进行中',
      value: 2
    },
    {
      label: '已完成',
      value: 3
    },
    {
      label: '已评价',
      value: 4
    },
    {
      label: '未接单',
      value: 5
    },
    {
      label: '订单取消',
      value: 6
    }
  ]
	export default {
	    data() {
	      return {
			  tableData:{},
			}
		},
    filters: {
      statusFormat(value){
        if(!value) return ''
        return status[value*1-1].label
      },
      finishStateFormat(value){
        if(!value) return ''
        return finishState[value*1-1].label
      }
    },
		methods: {
      // 审核通过
      queueClick(){
        this.$confirm('是否通过该退款申请?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl2(`/player/refund?id=${this.tableData.id}&results=1`),
            method: 'post',
            data: this.$http.adornData({
            })
          }).then(({data}) => {
            if(data.status == 0){
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.dataSelect()
                }
              })
            }else{
              this.$message({
                message: data.msg,
                duration: 1500
              })
            }
          })
        });
      },
      // 审核拒绝
      queueRefuse(){
        this.$prompt('请输入拒绝理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType: 'textarea'
        }).then(({ value }) => {
          this.$http({
            url: this.$http.adornUrl2(`/player/refusedRefund?id=${this.tableData.id}&type=2&refusedRefund=${value}`),
            method: 'post',
            data: this.$http.adornData({
            })
          }).then(({data}) => {
            if(data.status == 0){
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.dataSelect()
                }
              })
            }else{
              this.$message({
                message: data.msg,
                duration: 1500
              })
            }
          })
        });
      },
      // 返回上一级
      prev () {
        this.$router.back()
      },
      // 获取订单详情数据
      dataSelect () {
        let id = this.$route.query.id
        this.tableDataLoading = true
        this.$http({
          url: this.$http.adornUrl2('/player/findOrder'),
          method: 'get',
          params: this.$http.adornParams({
            'id': id
          })
        }).then(({data}) => {
          this.tableDataLoading = false
          let returnData = data.data;
          this.tableData = returnData
        })
      },
    },
		activated() {
			this.dataSelect()
		}
	  }
</script>

<style scoped="scoped" lang="scss">

    .order_item{
      border: 1px solid #e8e8e8;
      .el-col{
        display: flex;
        .label{
          width: 100px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          background-color: #fafafa;
          /*padding: 16px 24px;*/
          border-right: 1px solid #e8e8e8;
          border-bottom: 1px solid #e8e8e8;
        }
        .content{
          flex: 1;
          height: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          /*padding: 16px 24px;*/
          border-right: 1px solid #e8e8e8;
          border-bottom: 1px solid #e8e8e8;
        }
      }

    }


	/*.order_item{border: 1px solid #e8e8e8;}*/
	/*.border-top{border-top: 1px solid #ddd;}*/
	/*.item_left{border: 1px solid #ddd; border-radius: 8px;padding:10px 15px;margin-bottom: 20px;}*/
	/*.item_right{border: 1px solid #ddd;border-radius: 8px;padding:10px 15px; margin-bottom: 20px;}*/
</style>
